<template>
  <div>
    <!-- 普通参与、口令参与  -->
    <!-- TODO:口令参与逻辑未完成 -->
    <div class="lucky-dialog" v-if="isShowJoin">
      <div class="shadow" @click="closeDialog"></div>
      <div class="content">
        <div class="slot">
          <div class="countDown" style="padding-top: 12px">
            <div class="h">
              <span>{{ time }}后开奖</span>
              <van-icon class="close-icon" @click="closeDialog" name="cross" />
            </div>
            <div class="con">
              <div class="n">本轮即将送出：</div>
              <div
                class="goods"
                style="
                  height: 120px;
                  overflow-y: auto;
                  -webkit-overflow-scrolling: touch;
                "
              >
                <div
                  class="g-item"
                  v-for="(item, index) in activityPrizeObj.prizeList"
                  :key="index"
                >
                  <div class="l" style="margin-right: 20px">
                    <img v-if="item.picUrl" :src="item.picUrl" />
                    <img
                      v-else
                      :src="item.prizeType == 1 ? imgs.gift : imgs.tick"
                    />
                  </div>
                  <div class="r">
                    <div class="t">
                      {{ item.prizeNm }}
                    </div>
                    <div class="b">数量：{{ item.prizeNum || 0 }}</div>
                  </div>
                </div>
              </div>
              <div v-if="activityPrizeObj.drawRange == 0">
                <!-- 按钮 -->
                <img
                  v-if="isJoin"
                  class="watermark"
                  :src="luckyUri + '/icon/watermark.png'"
                  mode=""
                />
                <div
                  class="button"
                  style="margin-top: 55px"
                  :class="isJoin ? 'join' : ''"
                  @click="joinLucky"
                >
                  {{ isJoin ? "已参与，坐等开奖" : "参与抽奖" }}
                </div>
              </div>
              <div v-if="activityPrizeObj.drawRange == 2">
                <div class="pwd" v-if="!isJoin">
                  <span>发送口令</span>
                  <span class="p">“{{ activityPrizeObj.drawPwd }}”</span>
                  <span>参与抽奖</span>
                </div>
                <div class="pwd" style="background: none" v-else>
                  <span class="p">请勿离开直播间哦</span>
                </div>
                <img
                  v-if="isJoin"
                  class="watermark"
                  :src="luckyUri + '/icon/watermark.png'"
                  mode=""
                />
                <div v-if="isJoin" class="button join" style="width: 190px">
                  已参与，坐等开奖
                </div>
                <div
                  v-else
                  class="button"
                  style="width: 190px; margin-top: 33px"
                  @click="sendPassword"
                >
                  一键发送 立即参与
                </div>
              </div>
              <div class="rule-my">
                <div
                  style="margin-right: 25px"
                  @click.stop="showActivityRuleFun"
                >
                  活动规则
                </div>
                <div class="" @click.stop="showMyPrizeList()">我的奖品</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 抽奖未开始 已完成 -->
    <div class="lucky-dialog" v-if="notStartedDialog">
      <div class="shadow" @click="close('notStartedDialog')"></div>
      <div class="content">
        <div class="slot">
          <div class="countDown" style="padding-top: 12px">
            <div class="h">
              <span v-if="roomInfo.roomStatus == 1">抽奖暂未开启</span>
              <div v-else class="notStart">
                <div class="title">距离开播还有：</div>
                <div class="time">
                  <div class="it">
                    <span class="num">{{ hour }}</span>
                    <span class="unit">时</span>
                  </div>
                  <div>
                    <span class="num">{{ minute }}</span>
                    <span class="unit">分</span>
                  </div>
                  <div>
                    <span class="num">{{ second }}</span>
                    <span class="unit">秒</span>
                  </div>
                </div>
              </div>
              <van-icon
                class="close-icon"
                @click="close('notStartedDialog')"
                name="cross"
              />
            </div>
            <div class="con">
              <div class="n">本场直播奖品：</div>
              <div class="goods-box">
                <div
                  class="goods"
                  v-for="(item, index) in prizeListAll"
                  :key="index"
                >
                  <div class="g-t">
                    <img v-if="item.picUrl" :src="item.picUrl" />
                    <img
                      v-else
                      :src="item.prizeType == 1 ? imgs.gift : imgs.tick"
                    />

                    <span class="num">x{{ item.prizeNum }}</span>
                  </div>
                  <div class="g-b">{{ item.prizeNm }}</div>
                </div>
              </div>
              <div>
                <!-- 按钮 -->
                <div
                  class="button"
                  style="margin-top: 30px"
                  data-type="notStartedDialog"
                  @click="close('notStartedDialog')"
                >
                  我知道了
                </div>
              </div>
              <!-- 活动规则 和 我的奖品 -->
              <div class="rule-my" v-if="roomInfo.roomStatus == 1">
                <div @click="findAllPrizeUser">
                  查看全部中奖名单
                  <van-icon name="arrow" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 全部中奖名单 已完成 -->
    <div class="lucky-dialog all" v-if="isShowAll">
      <div class="shadow" @click="closeDialogAll"></div>
      <div class="content" style="top: 10%; max-height: 100vh">
        <div class="bgs">
          <img class="bg1" :src="luckyUri + '/bg/zj.png'" mode="widthFix" />
          <div class="list-box">
            <div class="title">幸运人数：{{ winNumAll }}</div>
            <div class="list">
              <div v-if="winNumAll != 0">
                <div
                  class="item"
                  v-for="(item, index) in winListAll"
                  :key="index"
                >
                  <div class="l">
                    <div class="hd">
                      <img :src="item.avatar" mode="" />
                    </div>
                    <div class="name text1line">{{ item.userNickName }}</div>
                  </div>
                  <div class="r text1line">{{ item.prizeNm }}</div>
                </div>
              </div>
              <div v-else>
                <div class="noData">
                  <img :src="luckyUri + '/no.png'" mode="widthFix" />
                  <div>暂时没有人中奖~</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="close" style="bottom: -20px" @click="close('isShowAll')">
          <img :src="luckyUri + '/close.png'" mode="aspectFill" />
        </div>
      </div>
    </div>
    <!-- 报名抽奖 已完成 -->
    <div class="lucky-dialog all entry" v-if="showEntryDraw">
      <div class="shadow" @click="close('showEntryDraw')"></div>
      <div class="content" style="top: 10%; max-height: 100vh">
        <div class="bgs">
          <img
            class="bg1"
            :src="luckyUri + '/bg/baoming.png'"
            mode="widthFix"
          />
          <div class="entry-form">
            <div
              class="privacy"
              @click="goToPrivacy"
              style="left: 40rpx; top: 60rpx"
            >
              <img src="../../../../assets/lucky/privacy/tip.png" mode="" />
              隐私政策
            </div>
            <div class="goods" style="">
              <div
                class="g-item"
                v-for="(item, index) in activityPrizeObj.prizeList"
                :key="index"
              >
                <div class="l">
                  <img v-if="item.picUrl" :src="item.picUrl" />
                  <img
                    v-else
                    :src="item.prizeType == 1 ? imgs.gift : imgs.tick"
                  />
                </div>
                <div class="r">
                  <div class="t">{{ item.prizeNm }}</div>
                  <div class="b">数量：{{ item.prizeNum || 0 }}</div>
                </div>
              </div>
            </div>
            <div class="times">
              <span>{{ time }} 后开奖</span>
            </div>
            <div class="form">
              <div class="inputs">
                <div
                  class="item"
                  v-for="(item, index) in activityPrizeObj.userApplyCols"
                  :key="index"
                >
                  <div class="label">{{ item.colNmDesc }}</div>
                  <div class="value">
                    <input
                      type="text"
                      v-model="item.colValue"
                      :name="item.colNm"
                      :placeholder="'请填写' + item.colNmDesc"
                      placeholder-class="placeholderClass"
                    />
                  </div>
                </div>
              </div>

              <div>
                <div class="entry-draw-btn">
                  <div class="tips" v-if="!isJoin">一旦提交，不得修改</div>
                  <!-- 按钮 -->
                  <img
                    v-if="isJoin"
                    class="watermark"
                    style="bottom: 2px"
                    :src="luckyUri + '/icon/watermark.png'"
                    mode=""
                  />
                  <div v-if="!isJoin" class="button" @click="formSubmit">
                    参与抽奖
                  </div>
                  <div v-else class="button join">已参与，坐等开奖</div>
                </div>
                <div class="rule-my">
                  <div style="margin-right: 25px" @click="showActivityRuleFun">
                    活动规则
                  </div>
                  <div class="" @click="showMyPrizeList()">我的奖品</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="close" style="bottom: -8px" @click="close('showEntryDraw')">
          <img :src="luckyUri + '/close.png'" />
        </div>
      </div>
    </div>
    <!-- 未中奖、未参与 已完成-->
    <div class="lucky-dialog notPrizeType" v-if="notPrizeType != 0">
      <div class="shadow" @click="closeNotPrizeType"></div>
      <div class="content" style="max-height: 100vh">
        <div class="bgs">
          <img
            class="bg1"
            v-if="notPrizeType == 1"
            :src="luckyUri + '/bg/weizhongjiang.png'"
            mode="widthFix"
          />
          <img
            class="bg1"
            v-if="notPrizeType == 2"
            :src="luckyUri + '/bg/weicanyu.png'"
            mode="widthFix"
          />
        </div>
        <div class="operate">
          <div class="look" @click="lookOtherPrize">
            看看大家的手气
            <van-icon name="arrow" />
          </div>
          <div class="btn" @click="closeNotPrizeType">我知道了</div>
        </div>
      </div>
    </div>
    <!-- 活动规则 已完成 -->
    <div class="lucky-dialog all rule-dialog" v-if="showActivityRule">
      <div
        class="shadow"
        style="z-index: 10001"
        @click.stop="showActivityRule = false"
      ></div>
      <div class="content" style="top: 10%; max-height: 100vh; z-index: 10002">
        <div class="bgs">
          <img class="bg1" :src="luckyUri + '/bg/rule.png'" />
          <div class="rule">{{ countDownRule }}</div>
        </div>
        <div
          class="close"
          style="bottom: -28px"
          @click.stop="showActivityRule = false"
        >
          <img :src="luckyUri + '/close.png'" />
        </div>
      </div>
    </div>

    <!-- 个人中奖 实物 无需填写地址/填写领奖信息 已完成 -->
    <!-- TODO:复制功能 -->
    <div class="lucky-dialog all person" v-if="isShowPerson">
      <div class="shadow" @click="close('isShowPerson')"></div>
      <div class="content" style="top: 10%">
        <div class="bgs">
          <img class="bg1" :src="luckyUri + '/bg/gongxini.png'" />
          <div class="list-box">
            <div class="tip" @click="openWinningExplanation">
              <img :src="luckyUri + '/bg/info-circle.png'" mode="aspectFill" />
              <span>中奖说明</span>
            </div>
            <div class="goods">
              <div class="left">
                <img
                  v-if="personPrizeObj.picUrl"
                  :src="personPrizeObj.picUrl"
                />
                <img
                  v-else
                  :src="personPrizeObj.prizeType == 1 ? imgs.gift : imgs.tick"
                />
              </div>
              <div class="right">
                <div class="top" v-if="personPrizeObj.prizeType == 2">
                  {{ personPrizeObj.prizeNm }}
                  <img
                    v-if="isShowCode"
                    @click="changeShowCode"
                    :src="luckyUri + '/bg/eye.png'"
                    mode=""
                  />
                  <img
                    v-else
                    @click="changeShowCode"
                    :src="luckyUri + '/bg/eye-c.png'"
                    mode=""
                  />
                </div>
                <div class="top" v-else>{{ personPrizeObj.prizeNm }}</div>
                <div class="bottom" v-if="personPrizeObj.prizeType == 2">
                  <div class="code-name" style="margin: 10rpx 0">
                    券码：{{
                      isShowCode
                        ? personPrizeObj.ticketNo
                        : "* * * * * * * * * * * * "
                    }}
                  </div>
                  <div class="copy" @click="copyCode(personPrizeObj.ticketNo)">
                    复制
                  </div>
                </div>
                <div v-else class="bottom" style="height: 30rpx"></div>
                <div class="bottom">
                  有效期：{{ personPrizeObj.effeStartTime }}-{{
                    personPrizeObj.effeEndTime
                  }}
                </div>
              </div>
            </div>
            <div class="footer">
              <div class="look" @click="lookOtherPrize">
                <span>看看大家的手气</span>
                <img :src="luckyUri + '/bg/path.png'" mode="" />
              </div>
              <div
                class="button"
                @click="fillInAwardInfo"
                v-if="personPrizeObj.rwAddress"
              >
                填写领奖信息
              </div>
              <div class="button" @click="close('isShowPerson')" v-else>
                开心收下
              </div>
            </div>
          </div>
        </div>
        <div class="bTip">
          <div>可“返回首页-我的-我的奖品礼券”中查看</div>
        </div>
        <div class="close" @click="close('isShowPerson')">
          <img :src="luckyUri + '/close.png'" mode="aspectFill" />
        </div>
      </div>
    </div>

    <!-- 中奖说明  已完成-->
    <div class="lucky-dialog all awardInfo" v-if="showWinningExplanation">
      <div
        class="shadow"
        style="z-index: 10011"
        @click="close('showWinningExplanation')"
      ></div>
      <div class="content" style="top: 10%; z-index: 10012">
        <div class="bgs">
          <img
            class="bg1"
            v-if="personPrizeObj.prizeType == 1"
            style="width: 280px; height: auto"
            :src="luckyUri + '/bg/ill-1.png'"
          />
          <img
            class="bg1"
            v-else
            style="width: 280px; height: auto"
            :src="luckyUri + '/bg/ill-2.png'"
            mode="widthFix"
          />
          <div class="list-box" style="top: 50px !important">
            <div class="tTip" style="font-size: 15px; color: #5f3838">
              {{ personPrizeObj.prizeNm }}
            </div>
            <div class="list">
              <div class="item" v-if="personPrizeObj.prizeType == 2">
                <div class="label">券码</div>
                <div class="value">{{ personPrizeObj.ticketNo }}</div>
              </div>
              <div class="item">
                <div class="label">有效期</div>
                <div class="value">
                  {{ personPrizeObj.effeStartTime }}至{{
                    personPrizeObj.effeEndTime
                  }}
                </div>
              </div>
              <div class="item">
                <div class="label">来自直播</div>
                <div class="value">{{ roomInfo.title }}</div>
              </div>
            </div>
            <div class="exp">
              请保持手机畅通，工作人员将在七个工作日内联系您沟通领奖事宜，请耐心等待！若在有效期内未能拨通电话，则视为自动放弃，请知晓！详情可咨询客服电话：400-1230-6500
            </div>
          </div>
        </div>
        <div class="go-btn" v-if="personPrizeObj.forwardBtn" @click="goToWeb">
          <img :src="luckyUri + '/go-btn.png'" mode="widthFix" />
        </div>
        <div
          class="close"
          style="bottom: -100rpx"
          @click="close('showWinningExplanation')"
        >
          <img :src="luckyUri + '/close.png'" mode="aspectFill" />
        </div>
      </div>
    </div>

    <!-- 本轮中奖信息 已完成 -->
    <div class="lucky-dialog all currentPrize" v-if="currentPrizeDialog">
      <div
        class="shadow"
        style="z-index: 10001"
        @click="close('currentPrizeDialog')"
      ></div>
      <div
        class="content"
        style="margin-top: 10%; max-height: 100vh; z-index: 10012"
      >
        <div class="bgs">
          <img
            class="bg1"
            src="../../../../assets/lucky/bg/benlunjiangpin.png"
            mode="widthFix"
          />
          <div
            class="list-box"
            style="
              top: 85px;
              overflow-y: auto;
              height: 335px;
              -webkit-overflow-scrolling: touch;
            "
          >
            <div class="">
              <div
                class="prize"
                v-for="(item, index) in currentPrize"
                :key="index"
              >
                <div class="p-l">
                  <img v-if="item.picUrl" :src="item.picUrl" />
                  <img
                    v-else
                    :src="item.prizeType == 1 ? imgs.gift : imgs.tick"
                  />
                </div>
                <div class="p-r">
                  <div class="p-t">{{ item.prizeNm }}</div>
                  <div class="p-s">{{ item.prizeNum }}</div>
                </div>
              </div>
            </div>
            <div class="title cur-title" style="margin-top: 20px">
              <img
                style="width: 20px; height: 41px"
                src="../../../../assets/lucky/icon/left.png"
                mode="widthFix"
              />
              <div>
                <div style="font-size: 15px; color: #fd6d5a; margin: 5px 15px">
                  恭喜以下幸运儿
                </div>
                <div>幸运人数：{{ winNum }}</div>
              </div>
              <img
                style="width: 20px; height: 41px"
                src="../../../../assets/lucky/icon/right.png"
                mode="widthFix"
              />
            </div>
            <div class="list" style="height: 177px">
              <block v-if="winNum != 0">
                <div class="item" v-for="(item, index) in winList" :key="index">
                  <div class="l">
                    <div class="hd">
                      <img :src="item.avatar" mode="" />
                    </div>
                    <div class="name text1line">{{ item.userNickName }}</div>
                  </div>
                  <div class="r text1line">{{ item.prizeNm }}</div>
                </div>
              </block>
              <block v-else>
                <div class="noData">
                  <img :src="luckyUri + '/no.png'" mode="widthFix" />
                  <div>暂时没有人中奖~</div>
                </div>
              </block>
            </div>
          </div>
        </div>
        <div
          class="close"
          style="bottom: 40px"
          @click="close('currentPrizeDialog')"
        >
          <img :src="luckyUri + '/close.png'" mode="aspectFill" />
        </div>
      </div>
    </div>

    <!-- 填写领奖信息 已完成 -->
    <div class="lucky-dialog all awardInfo" v-if="showFillInAwardInfo">
      <div
        class="shadow"
        style="z-index: 10011"
        @click="close('showFillInAwardInfo')"
      ></div>
      <div class="content" style="top: 20%; z-index: 10012">
        <div class="bgs">
          <img
            class="bg1 bgInfo"
            :src="luckyUri + '/bg/awardInfo.png'"
            mode="widthFix"
          />
          <div class="list-box">
            <div class="tTip">请正确填写以下信息领取奖品哦～</div>
            <div class="form" style="margin-top: 10rpx">
              <div class="item">
                <div class="label">姓名</div>
                <div class="value">
                  <input
                    style="width: 100%"
                    type="text"
                    v-model="awardInfoForm.userName"
                    name="userName"
                    placeholder="请填写姓名"
                    placeholder-class="placeholderClass"
                  />
                </div>
              </div>
              <div class="item">
                <div class="label">手机</div>
                <div class="value">
                  <input
                    style="width: 100%"
                    type="number"
                    v-model="awardInfoForm.mobile"
                    maxlength="11"
                    name="mobile"
                    placeholder="请填写手机"
                    placeholder-class="placeholderClass"
                  />
                </div>
              </div>
              <div class="item">
                <div class="label">地址</div>
                <div class="value">
                  <textarea
                    style="width: 100%; padding: 5px 10px; height: 52px"
                    name="address"
                    v-model="awardInfoForm.address"
                    placeholder="请填写详细收货地址"
                    placeholder-class="placeholderClass"
                  ></textarea>
                </div>
              </div>
              <div class="tTip">*提交后2小时内支持修改信息</div>
              <div>
                <div class="button" @click="formSubmitAwardInfo">提交</div>
              </div>
            </div>
            <div class="privacy" @click="goToPrivacy">
              <img src="../../../../assets/lucky/privacy/tip.png" mode="" />
              隐私政策
            </div>
          </div>
        </div>
        <div
          class="close"
          style="bottom: -90px"
          @click="close('showFillInAwardInfo')"
        >
          <img :src="luckyUri + '/close.png'" mode="aspectFill" />
        </div>
      </div>
    </div>
    <!-- 我的奖品列表 -->
    <van-action-sheet
      style="height: 40vh;z-index:10000"
      :closeable="false"
      v-model="myPrizeListShow"
    >
      <prizeList
        :liveWinArray="liveWinArray"
        @findPrize="findPrizeFun"
        @close="myPrizeListShow = false"
      ></prizeList>
    </van-action-sheet>
  </div>
</template>
<script>
import dayjs from "dayjs";
import fun from "@/util/function";
import gift from "@/assets/lucky/gift.jpg";
import tick from "@/assets/lucky/tick.jpg";
import prizeList from "./prizeList.vue";
// import Clipboard from "clipboard";
export default {
  name: "countdown",
  props: {
    appId: {
      type: [String, Number],
      default: "",
    },
    activityId: {
      type: [String, Number],
      default: "",
    },
    roomInfo: {
      type: Object,
      default: {},
    },
    roomId: {
      type: [String, Number],
      default: "",
    },
    time: {
      type: [String, Number],
      default: "",
    },
    socketType: {
      type: [String, Number],
      default: "",
    },
  },
  // 组件区域
  components: {
    prizeList,
  },
  data() {
    return {
      imgs: {
        gift,
        tick,
      },
      luckyUri: "https://qs-zxjt2.oss-cn-shenzhen.aliyuncs.com/assets",
      myPrizeListShow: false, // 本场 我的奖品列表
      notStartedDialog: false, // 抽奖暂未开始弹框
      prizeListAll: [], // 本场所有奖品
      isShowJoin: false, // 是否显示参与抽奖
      isJoin: false, // 是否参与了抽奖
      isShowAll: false, // 全部名单
      isShowPerson: false, // 显示个人中奖
      personPrizeObj: {
        rwAddress: true,
        prizeType: 2,
        prizeNm: "啊啊啊啊",
        effeStartTime: "2023-03-02",
        effeEndTime: "2023-03-02",
        ticketNo: "2342-2343-932911231111hhh112821211-11285",
      }, // 个人中奖后的数据
      awardInfoForm: {
        userName: "",
        mobile: "",
        address: "",
      },
      isShowCode: false, // 是否显示券码

      password: "", // 如果有值，则代表口令抽奖
      prizeList: [], // 奖品列表
      activityPrizeObj: {
        drawRange: 0, // 2 口令抽奖 0 全员抽奖
        drawPwd: "发送口令", // 口令
        prizeList: [
          {
            prizeNm: "一等奖",
            prizeNum: 12,
            picUrl: "",
            prizeType: 2,
            prodTicketId: 123,
          },
          {
            prizeNm: "二等奖",
            prizeNum: 12,
            picUrl: "",
            prizeType: 1,
            prodTicketId: 123,
          },
          // {
          //   prizeNm: "三等奖",
          //   prizeNum: 12,
          //   picUrl: "",
          //   prizeType: 2,
          //   prodTicketId: 123
          // }
        ],
        userApplyCols: [
          {
            colNm: "username",
            colNmDesc: "姓名姓名姓名",
            colValue: "",
          },
          {
            colNm: "mobile",
            colNmDesc: "手机号",
            colValue: "",
          },
          {
            colNm: "mobile",
            colNmDesc: "自定义1",
            colValue: "",
          },
          {
            colNm: "mobile",
            colNmDesc: "测试两下",
            colValue: "",
          },
        ],
      }, // 本次活动相关信息

      showActivityRule: false, // 活动规则弹框
      showMyprize: false, // 我的奖品弹框
      countDownRule: "", // 活动规则

      notPrizeType: 0, // 0 不弹框 1未中奖 2未参与
      currentPrizeDialog: false, // 本轮中奖信息
      winNum: 10, // 中奖人数
      winList: [
        // {
        //   userNickName: "小明",
        //   avatar: "http://www.123.com/1.jpg",
        //   prizeNm: "一等奖"
        // },
        // {
        //   userNickName: "小明",
        //   avatar: "http://www.123.com/1.jpg",
        //   prizeNm: "一等奖"
        // }
      ], // 中奖列表
      currentPrize: [
        // {
        //   prizeNm: "一等奖",
        //   prizeNum: 12,
        //   picUrl: "http://www.123.com/1.jpg",
        //   prizeType: 2,
        //   prodTicketId: 123
        // },
        // {
        //   prizeNm: "一等奖",
        //   prizeNum: 12,
        //   picUrl: "http://www.123.com/1.jpg",
        //   prizeType: 2,
        //   prodTicketId: 123
        // }
      ], // 当前中奖的奖品
      showWinningExplanation: false, // 中奖说明

      winNumAll: 0, // 中奖人数
      winListAll: [], // 中奖列表

      showEntryDraw: false, // 报名参与抽奖
      entryForm: {},

      showFillInAwardInfo: false, // 填写领奖信息弹框
      hour: "00", // 时
      minute: "00", // 分
      second: "00", // 秒
      isNeedPrize: false, // 是否需要弹出中奖信息

      liveWinArray: [], // 我的奖品列表
    };
  },
  // 计算属性
  computed: {},
  // 监听
  watch: {
    socketType: {
      handler: function (val, oldVal) {
        if (val == "countdown") {
          // 倒计时开始
          this.getActivityPrize();
        } else if (val == "countdown_draw") {
          // 如果时间未到，则不弹框
          if (this.time == "00:00") {
            this.isNeedPrize = false;
            // 倒计时结束展示中奖信息
            this.showMyprizeFun();
          } else {
            this.isNeedPrize = true;
          }
        }
      },
      immediate: true,
    },
    activityId: {
      handler: function (val, oldVal) {
        if (val) {
          this.getDrawRule(val);
        }
      },
      immediate: true,
    },
    time: {
      handler: function (val, oldVal) {
        if (val == "00:00") {
          // 关闭所有弹框
          this.notStartedDialog = false;
          this.isShowJoin = false;
          this.isShowAll = false;
          // this.isShowPerson = false;
          this.showActivityRule = false;
          this.currentPrizeDialog = false;
          this.showEntryDraw = false;
          this.showFillInAwardInfo = false;

          if (this.isNeedPrize) {
            // 倒计时结束展示中奖信息
            this.showMyprizeFun();
          }
        }
      },
      immediate: true,
    },
  },
  created() {},
  // 初始化
  mounted() {
    console.log(this.roomInfo, "this.roomInfo");
    localStorage.setItem("roomInfo", JSON.stringify(this.roomInfo));
  },
  // 函数集合
  methods: {
    // 我的奖品列表点击查看详情
    findPrizeFun(val){
      this.showMyprizeFun(val.activityId)
      this.myPrizeListShow = false
    },
    // 打开我的奖品列表
    showMyPrizeList() {
      this.$http
        .get(
          "/lotto/userLottoTickets?appId=DJS&page=1&pageSize=20&roomId=" +
            this.roomId
        )
        .then(
          (res) => {
            if (res.data.code == "000000") {
              this.liveWinArray = res.data.data;
              this.myPrizeListShow = true;
            } else {
              console.log("我的直播间奖品列表返回error", res.data);
            }
          },
          (err) => {
            console.log(err);
          }
        );
    },

    // 报名抽奖
    formSubmit() {
      let items = this.activityPrizeObj.userApplyCols;
      console.log(items, "ssss");
      // if(items.length == 0) return
      for (let i = 0; i < items.length; i++) {
        //校验
        if (!items[i].colValue) {
          fun.toastMessage("请填写" + items[i].colNmDesc);
          return;
        }
        if (items[i].colNm == "mobile") {
          let phoneNum = items[i].colValue;
          const reg = /^1[0-9]{10}$/;
          if (!reg.test(phoneNum)) {
            fun.toastMessage("请填入正确的手机号码");
            return;
          }
        }
      }
      // 处理数据
      this.entryForm = {};
      for (let i = 0; i < items.length; i++) {
        this.entryForm[items[i].colNm] = items[i].colValue;
      }
      this.joinLucky();
    },

    joinLucky() {
      let form = this.entryForm;
      let params = {
        appId: this.appId,
        roomId: this.roomId,
        activityId: this.activityId,
        account: this.$store.state.userInfo.un,
        ...form,
      };
      this.$http
        .post("/lotto/countdown/userApply", params, {
          headers: { "Content-Type": "application/json" },
        })
        .then((res1) => {
          let res = res1.data;
          if (res.code == "000000") {
            fun.toastSuccess("参与成功");
            this.isJoin = true;
          } else {
            fun.toastMessage(res.msg);
          }
        });
    },
    // 填写领奖信息
    formSubmitAwardInfo() {
      let form = this.awardInfoForm;
      if (!form.userName) {
        fun.toastMessage("请填写姓名");
        return;
      }
      if (!form.mobile) {
        fun.toastMessage("请填写手机");
        return;
      }
      if (!form.address) {
        fun.toastMessage("请填写详细收货地址");
        return;
      }
      let params = {
        appId: "DTS",
        roomId: this.roomId,
        activityId: this.activityId,
        prizeId: this.personPrizeObj.prizeId || 0,
        ...form,
      };
      this.$http
        .post("/lotto/countdown/userReceiveInfo", params, {
          headers: { "Content-Type": "application/json" },
        })
        .then((res1) => {
          let res = res1.data;
          if (res.code == "000000") {
            fun.toastSuccess("提交成功");
            this.showFillInAwardInfo = false;
          } else {
            fun.toastMessage(res.msg);
          }
        });
    },
    // 发送口令参与抽奖
    sendPassword() {
      let text = this.activityPrizeObj.drawPwd || "";
      if (text) {
        this.sendDatabaseMsg(text);
      }
      // // this.setCommentText(text)
      // setTimeout(() => {
      //   this.joinLucky();
      // }, 1500);
    },
    beforeSendDatabaseMsg(inputValue) {
      let { roomStatus, anchor, sid, roomId } = this.roomInfo;
      console.log(this.roomInfo, "this.roomInfo");
      let liveType = "1";
      if (roomStatus == 0) {
        liveType = "1";
      } else if (roomStatus == 1) {
        liveType = "2";
      } else {
        liveType = "16";
      }
      return {
        type: "0",
        liveType: liveType,
        anchor: anchor,
        message: inputValue,
        plat: fun.getPlatform(),
        sceneId: sid,
        roomId: roomId,
      };
    },
    sendDatabaseMsg(inputValue) {
      //消息入库 在im回调之后
      let params = this.beforeSendDatabaseMsg(inputValue);
      if (inputValue != "") {
        this.$http.post("/h5live/speakSend", this.$qs.stringify(params)).then(
          (res) => {
            if (res.data.code == "000000") {
              if (this.roomInfo.plCk == "1") {
                //plCk 评论审核 0 先发 1 先审后发
                fun.toastMessage("已提交，等待审核", 2000);
              }
              this.joinLucky();
            } else if (res.data.code == "100003") {
              fun.toastMessage("您已被禁言", 1500);
            } else if (res.data.code == "100008") {
              fun.toastMessage("发言过于频繁，请稍后再发言！", 1500);
            } else {
              fun.toastMessage(res.data.msg, 1500);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
      this.inputValue = "";
    },
    // 查看全部中奖名单
    async findAllPrizeUser() {
      let o = {
        roomId: this.roomId,
        page: 1,
        pageSize: 100,
      };
      this.$http.get("/lotto/countdown/allUserWinList", { params: o }).then(
        //点击商品统计
        (res1) => {
          let res = res1.data;
          if (res.code == "000000") {
            this.winListAll = res.data.winList;
            this.winNumAll = res.data.winNum;
            this.isShowAll = true;
          } else {
            fun.toastMessage(res.msg);
          }
        },
        (err) => {}
      );
    },
    showDialog(state) {
      console.log(state, "asdad");
      if (state == 1 || state == 10) {
        // 活动未开始
        this.getRoomPrizeList();
        let roomInfo = this.roomInfo;
        // this.handleCountDown('2023-08-30 10:12:00')
        if (roomInfo.roomStatus == 0) {
          // 直播未开始 处理倒计时
          this.handleCountDown(roomInfo.beginTime);
        }
      } else if (state == 7) {
        // 活动进行中
        this.getActivityPrize();
      } 
      // else if (state == 10) {
      //   // 活动已结束
      //   this.showMyprizeFun();
      // }
    },
    async getActivityPrize(id) {
      console.log("我是getActivityPrize", this.activityId);
      let o = {
        roomId: this.roomId,
        activityId: id || this.activityId,
      };
      this.$http.get("/lotto/countdown/getActivityPrize", { params: o }).then(
        //点击商品统计
        (res1) => {
          let res = res1.data;
          if (res.code == "000000") {
            this.activityPrizeObj = res.data;
            this.activityPrizeObj.userApplyCols = res.data.userApplyCols || [];
            this.isJoin = res.data.participate;
            if (res.data.drawRange == 1) {
              this.showEntryDraw = true;
            } else {
              this.isShowJoin = true;
            }
          } else {
            fun.toastMessage(res.msg);
          }
        },
        (err) => {}
      );
    },
    // 获取当前直播间的本场次的全部奖品
    async getRoomPrizeList() {
      let o = {
        roomId: this.roomId,
      };
      this.$http
        .get("/lotto/countdown/getRoomPrizeList?roomId=" + this.roomId)
        .then(
          //点击商品统计
          (res1) => {
            let res = res1.data;
            if (res.code == "000000") {
              this.prizeListAll = res.data;
              this.notStartedDialog = true;
            } else {
              fun.toastMessage(res.msg);
            }
          },
          (err) => {}
        );
    },
    // 展示我的奖品
    showMyprizeFun(id) {
      console.log(id, "-=-=");
      // let time = this.time || "00:00";
      // if (time != "00:00") return;
      let o = {
        appId: "ZP",
        roomId: this.roomId,
        activityId: id || this.activityId,
      };
      this.$http.get("/lotto/countdown/getUserWins", { params: o }).then(
        //点击商品统计
        (res1) => {
          let res = res1.data;
          console.log(res, "res");
          this.isNeedPrize = false;
          if (res.code == "000000") {
            let data = res.data;
            let once = localStorage.getItem("oncePrizeId") || [];
            if (once.includes(this.activityId)) return;
            localStorage.setItem("oncePrizeId", once);
            if (data.prizeType == 0) {
              this.notPrizeType = 1;
            } else {
              data.effeStartTime = dayjs(data.effeStartTime).format(
                "YYYY.MM.DD"
              );
              data.effeEndTime = dayjs(data.effeEndTime).format("YYYY.MM.DD");
              // 实物
              this.personPrizeObj = data;
              this.isShowPerson = true;
            }
          } else {
            fun.toastMessage(res.msg);
          }
        },
        (err) => {}
      );
    },
    async getDrawRule(id) {
      let o = {
        activityId: id,
      };
      this.$http
        .get("/lotto/countdown/getDrawRule", { params: o })
        .then((res1) => {
          let res = res1.data;
          this.countDownRule = res.data;
        });
    },
    // 看看大家的手气
    async lookOtherPrize() {
      let o = {
        roomId: this.roomId,
        activityId: this.activityId,
        page: 1,
        pageSize: 100,
      };
      this.$http
        .get("/lotto/countdown/currRoundUserWinList", { params: o })
        .then((res1) => {
          let res = res1.data;
          if (res.code == "000000") {
            this.winNum = res.data.winNum;
            this.winList = res.data.winList;
            this.currentPrize = res.data.prizeList;
            this.currentPrizeDialog = true;
          } else {
            fun.toastMessage(res.msg);
          }
        });
    },
    // 展示活动规则
    showActivityRuleFun() {
      this.showActivityRule = true;
    },
    closeDialog() {
      this.isShowJoin = false;
    },
    closeDialogAll() {
      this.isShowAll = false;
    },
    close(type) {
      this[type] = false;
    },
    closeNotPrizeType() {
      this.notPrizeType = 0;
    },
    goToPrivacy() {
      this.$router.push({
        path: "/zxjt/privacyContent",
      });
    },
    // 打开中奖说明
    openWinningExplanation() {
      this.showWinningExplanation = true;
    },
    fillInAwardInfo() {
      this.showFillInAwardInfo = true;
    },
    // 复制券码
    copyCode() {},

    changeShowCode() {
      this.isShowCode = !this.isShowCode;
    },
    // 打开微信 或者 app
    goToWeb() {
      // let forwardWxLink = this.data.personPrizeObj.forwardWxLink || 'https://www.baidu.com'
      // let forwardAppLink = this.data.personPrizeObj.forwardAppLink
      // wx.navigateTo({
      //   url: '/pages/webview/index?src=' + forwardWxLink,
      // })
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";

input,
textarea {
  background: transparent;
}
// /deep/.van-overlay {
//   z-index: 10000 !important;
// }
// /deep/.van-popup {
//   z-index: 10002 !important;
// }
</style>
